<template>
  <van-row class="contacts-cell" v-fb="{cls:'cellActive'}">
    <van-col class="contacts-left" span="4">
      <van-image
        class="contacts-icon"
        radius="4"
        :showloading="loading"
        :src="headUrl"
        lazy-load
      />
    </van-col>
    <van-col class="contacts-title van-hairline--bottom" span="20">{{title}}</van-col>
  </van-row>
</template>

<script>
  export default {
    name: "ContactCell",
    props: {
      headUrl: {
        type: String,
        default: "https://img01.yzcdn.cn/vant/cat.jpeg"
      },
      title: {
        type: String,
        default: ""
      }
    },
    data () {
      return {
        loading: false
      }
    }
  }
</script>

<style scoped>
  .contacts-cell {
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
  }
  .contacts-left {
    height: 50px;
    padding: 4px 0 2px 16px;
  }
  .contacts-icon {
    height: 40px;
    width: 40px;
  }
  .contacts-title {
    height: 50px;
    line-height: 40px;
    padding: 4px 0 2px 8px;
    font-weight: 500;
    font-size: 16px;
  }
  .cellActive {
    background-color: #f2f3f5;
  }
</style>